<template>
    <div>
        <el-form :model="form"
               :rules="rules"
               label-width="100px"
               ref="form">
        <el-row :gutter="20"
                style="padding: 10px 40px 0 40px;">
          <el-col :span="8">
            <el-form-item label="特征名称"
                          prop="name">
              <el-input size="mini"
                        placeholder="请输入特征名称"
                        v-model="form.name"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="特征编号"
                          prop="code">
              <el-input size="mini"
                        placeholder="请输入特征编号"
                        v-model="form.code"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="特征单位"
                          prop="unit">
              <el-input size="mini"
                        placeholder="请输入特征单位"
                        v-model="form.unit"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <h3>配置指标</h3>
        <el-divider></el-divider>
        <el-row :gutter="20"
                style="margin-left: 75px; margin-right: 50px;">
          <el-col :span="8">
            <el-form-item label="是否配置指标"
                          prop="target">
              <el-radio-group v-model="form.target">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col v-if="isShowNum"
                  :span="8">
            <el-form-item label="数据类型"
                          prop="num">
              <el-select size="mini"
                         v-model="form.num"
                         @change="numChange(form.num,form)"
                         placeholder="请选择数据类型">
                <el-option v-for="item in dataTypeList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>
        <featurePoolDataType v-if='isShowTarget'
              :data='form.targetList'></featurePoolDataType>
        <div v-if='isShowBuer'
             style="background-color: rgb(245, 245, 246);">
          <el-row :gutter="20"
                  style="padding: 10px 40px 0 40px;">
            <el-col :span="6">
              <el-form-item label="布尔值"
                            prop="buer1">
                <el-input size="mini"
                          placeholder="请输入true"
                          v-model="form.buer1"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label=""
                            prop="buer2">
                <el-input size="mini"
                          placeholder="请输入false"
                          v-model="form.buer2"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label=""
                            prop="buer3">
                <el-input size="mini"
                          placeholder="请输入true"
                          v-model="form.buer3"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label=""
                            prop="buer4">
                <el-input size="mini"
                          placeholder="请输入false"
                          v-model="form.buer4"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if='isShowFloatingPoint'
             style="background-color: rgb(245, 245, 246);">
          <el-row :gutter="20"
                  style="padding: 10px 40px 0 40px;">
            <el-col :span="6">
              <el-form-item label="浮点最大值"
                            prop="floatingPointBig">
                <el-input size="mini"
                          type="number"
                          placeholder="请输入浮点最大值"
                          v-model="form.floatingPointBig"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="浮点最小值"
                            prop="floatingPointSmall">
                <el-input size="mini"
                          type="number"
                          placeholder="请输入浮点最小值"
                          v-model="form.floatingPointSmall"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </div>
        <div v-if='isShowImg'
             style="background-color: rgb(245, 245, 246);">
          <el-row :gutter="20"
                  style="padding: 10px 40px 0 40px;">
            <el-col :span="24">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                         list-type="picture-card"
                         :limit="3"
                         :on-exceed="handleExceed"
                         :on-preview="handlePictureCardPreview"
                         :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                <div slot="tip"
                     class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
              <el-dialog :visible.sync="dialogImgVisible">
                <img width="100%"
                     :src="form.ImageUrl"
                     alt="">
              </el-dialog>
            </el-col>
          </el-row>
        </div>

        <div v-if='isShowEnum'
             style="background-color: rgb(245, 245, 246);">
          <template v-for="(item,index) in form.enumList">
            <div :key="index">
              <el-row :gutter="10">
                <el-col :span="3">
                  <div style="padding-left:30px;padding-top: 10px;">枚举项：{{index+1}}</div>
                </el-col>
                <el-col :span="3"
                        style="padding:10px 5px 0 0;">
                  <el-button type="text"
                             icon="el-icon-delete"
                             @click.prevent="removeEnum(item)">删除</el-button>
                </el-col>
              </el-row>
              <el-row :gutter="10"
                      style="margin-left: 75px; margin-right: 50px;">
                <el-col :span="6">
                  <el-form-item label="标识"
                                prop="enumLabel">
                    <el-input size="mini"
                              placeholder="请输入标识"
                              v-model="item.enumLabel"
                              autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="描述"
                                prop="enumValue">
                    <el-input size="mini"
                              placeholder="请输入描述"
                              v-model="item.enumValue"
                              autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </template>
          <el-row :gutter="10"
                  style="margin-left:75px;">
            <el-col :span="3">
              <el-button type="text"
                         icon="el-icon-plus"
                         @click="addEnum">新增枚举项</el-button>
            </el-col>
          </el-row>
        </div>
        <h3>备注</h3>
        <el-divider></el-divider>
        <template>
          <el-row :gutter="20"
                  style="padding: 10px 40px 0 40px;">
            <el-col :span="24">

              <el-form-item label="特征池描述">
                <el-input v-model="form.describe"
                          type="textarea"
                          maxlength="25"
                          show-word-limit
                          placeholder="请输入特征池描述"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>
    </div>
</template>
<script>
import { v4 as uuid } from 'uuid'
import featurePoolDataType from '@/components/featurePoolDataType/main.vue'
export default {
  data() {
    return {
      defaults: {},
      dialogFormVisible: false,
      isShowTarget: false,
      isShowBuer: false,
      isShowFloatingPoint: false,
      isShowImg: false,
      dialogImgVisible: false,
      isShowNum: false,
      isShowEnum: false,
      dialogWidth: '70%',
      defalutEnum: {
        enumLabel: '',
        enumValue: '',
      },
      form: {
        name: '',
        code: '',
        unit: '',
        target: '1',
        num: '',
        buer1: '',
        buer2: '',
        buer3: '',
        buer4: '',
        ImageUrl: '',
        floatingPointBig: '',
        floatingPointSmall: '',
        describe: '',
        enumList: [
          {
            enumLabel: '',
            enumValue: '',
          },
        ],
        targetList: [
          {
            targetName: '',
            targetCode: '',
            targetNumber: '',
            buer5: '',
            buer6: '',
            buer7: '',
            buer8: '',
            ImageUrl1: '',
            floatingPointBig3: '',
            floatingPointSmall4: '',
            enumList1: [
              {
                enumLabel: '',
                enumValue: '',
              },
            ],
          },
        ],
      },
      option: {},
      dataTypeList: [
        {
          value: '1',
          label: '字符串',
        },
        {
          value: '2',
          label: '枚举',
        },
        {
          value: '3',
          label: '图片',
        },
        {
          value: '4',
          label: '浮点',
        },
        {
          value: '5',
          label: '布尔值',
        },
      ],
    }
  },
  components: {
    featurePoolDataType,
  },
  watch: {
    'form.target': {
      handler(val) {
        if (val == '0') {
          this.isShowNum = false
          this.isShowEnum = false
          this.isShowBuer = false
          this.isShowImg = false
          this.isShowFloatingPoint = false
          this.isShowTarget = true
        } else if (val == '1') {
          this.isShowNum = true
          this.isShowEnum = false
          this.isShowBuer = false
          this.isShowImg = false
          this.isShowFloatingPoint = false
          this.isShowTarget = false
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    numChange(type, form) {
      switch (type) {
        case '1':
        case '5':
          this.isShowEnum = false
          this.isShowBuer = true
          this.isShowImg = false
          this.isShowFloatingPoint = false
          break
        case '2':
          this.isShowEnum = true
          this.isShowBuer = false
          this.isShowImg = false
          this.isShowFloatingPoint = false
          break
        case '3':
          this.isShowEnum = false
          this.isShowBuer = false
          this.isShowImg = true
          this.isShowFloatingPoint = false
          break
        case '4':
          this.isShowEnum = false
          this.isShowBuer = false
          this.isShowImg = false
          this.isShowFloatingPoint = true
          break
        default:
          break
      }
    },
    removeEnum(item) {
        debugger
        console.log('22',uuid);
      const index = this.form.enumList.findIndex((x) => x.id == item.id)
      if (index != -1) {
        this.form.enumList.splice(index, 1)
      }
    },
    addEnum() {
        console.log('11',uuid);
      const enumObj = Object.assign(this.defalutEnum, {
       id: uuid(),
      })
      console.log('22',uuid);
      this.form.enumList.push(JSON.parse(JSON.stringify(enumObj)))
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前环境仅限上传 3 个文件`)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.form.ImageUrl = file.url
      this.dialogImgVisible = true
    },
   
  },
}
</script>

<style scoped>
.grid-content {
  height: 80px;
  text-align: center;
  line-height: 40px;
}

.middle {
  border-left: 2px solid #f1f1f1f1;
}

.grid-content .grid-content-item {
  font-weight: bold;
  height: 50%;
  text-align: center;
  line-height: 40px;
}
.top-card {
  margin: 10px 30px;
}
/* TODO:改变按钮的颜色未起作用 */
.el-switch.is-checked .el-switch__core {
  border-color: #00e266 !important;
  background-color: #00e266 !important;
}
</style>
